<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Prototype Utility Demo</title>

    <!-- Disable caching -->
    <meta HTTP-EQUIV="Pragma" content="no-cache" />
    <meta HTTP-EQUIV="Cache-Control" content="no-cache" />

	<link rel="stylesheet" href="mobile.css">
	<link rel="stylesheet" href="css/prettify.css">

	<script type="text/javascript" src="javascript/prototype.js"></script>
	<script type="text/javascript" src="javascript/prettify.js"></script>
	
	<script type="text/javascript" src="demo.js"></script>
	<script type="text/javascript" src="main.js"></script>
	<script type="text/javascript" src="widget.js"></script>
	
</head>
<body onload="myonLoad()">
<!-- below required for widgets -->
<!-- <embed type="application/x-systeminfo-widget" hidden="yes"></embed> -->
<h2>Prototype Utility Demo</h2>
<hr /><p></p>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" class="current">$()</a></li>
<li><a href="#">$$()</a></li>
<li><a href="#">$F()</a></li>
<li><a href="#">$A()</a></li>
<li><a href="#">$H()</a></li>
<li><a href="#">$R()</a></li>
<li><a href="#">$w()</a></li>
</ul>
</div>
<div id="content">

<!-- TAB1 ---------------------------------->
<div id="tab1">
<p>
	<div id="myDiv">
		<p>This is a paragraph</p>
	</div>
	<div id="myOtherDiv">
		<p>This is another paragraph</p>
	</div>

	<input type="button" value="Test $()" onclick="test$();"/><br/> 
	
</p>
	<hr />
<p>
<code class="prettyprint">
function test$(){
	var d = $('myDiv');
	alert(d.innerHTML);
	d.hide();
	d.show();
	d.addClassName('active');
}

</code>
</p>
</div>

<!-- TAB2 ---------------------------------->
<div class="tab" id="tab2">
<p>
<div id='loginForm'>
	<div class='field'>
		<span class='fieldName'>User name:</span>
		<input type='text' id='txtName' value='joedoe1'/>
	</div>
	<div class='field'>
		<span class='fieldName'>Password:</span>
		<input type='password' id='txtPass' value='secret' />
	</div>
	<input type='submit' value='login' />
</div> 
<input type="button" value='test $$()' onclick='test$$();' />
</p>
<hr />
<p>
<pre>
<code class="prettyprint">
function test$$(){
	/*
	  in case CSS is not your forte, the expression below says
	  'find all the INPUT elements that are inside 
	  elements with class=field that are inside a DIV
	  with id equal to loginForm.'
	*/
	var f = $$('div#loginForm .field input');
	var s = '';
	for(var i=0; i &lt; f.length; i++){
		s += f[i].value + '/';
	}
	alert(s); // shows: "joedoe1/secret/"
	
	// now passing more than one expression
	f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
	s = '';
	for(var i=0; i &lt; f.length; i++) {
		s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
	}
	alert(s); //shows: "joedoe1/secret/User name:/Password:/"
}

</code>
</pre>
</p>
</div>

<!-- TAB3 ---------------------------------->
<div class="tab">

<p>
<input type="text" id="userName" value="Joe Doe"><br/> 
<input type="button" value="Test $F()" onclick="test$F();"><br/> 
</p>
<hr />
<p>
<code class="prettyprint">
function test$F()
{
	alert(  $F('userName')  );
}

</code>
</p>
</div>

<!-- TAB4 ---------------------------------->
<div class="tab">
<p>
<select id="lstEmployees" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>
<br />
<input type="button" value="Show the options" onclick="showOptions();" > 
</p>
<hr />
<p>
<code class="prettyprint">
function showOptions(){
	var someNodeList = $('lstEmployees').getElementsByTagName('option');
	var nodes = $A(someNodeList);
	nodes.each(function(node){
		alert(node.nodeName + ': ' + node.innerHTML);
	});
}
</code>
</p>
</div>

<!-- TAB5 ---------------------------------->
<div class="tab" id="tabwidget">
<p>
<input type="button" value="Sample Count(Test $H())" onclick="testHash();" /> 
</p>
<hr />
<p>
<code class="prettyprint">
function testHash()
{
	//let's create the object
	var a = {
		first: 10,
		second: 20,
		third: 30
		};

	//now transform it into a hash
	var h = $H(a);
	alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</code>
</p>
</div>

<!-- TAB6 ---------------------------------->
<div class="tab">
<p>
<input type="button" value="Sample Count(Test $R())" onclick="demoDollar_R();" /> 
</p>
<hr />
<p>
<code class="prettyprint">
function demoDollar_R(){
	var range = $R(10, 20, false);
	range.each(function(value, index){
		alert(value);
	});
}
</code>
</p>
</div>

<!-- TAB7 ---------------------------------->
<div class="tab">
<p>
<input type="button" value="Test $w()" onclick="demoDollar_w();" /> 
</p>
<hr />
<p>
<code class="prettyprint">
function demoDollar_w(){
	$w('apples bananas kiwis').each(function(fruit){
	  var message = 'I like ' + fruit;
	  alert(message);
	  // do something with the message
	})
}

</code>
</p>
</div>

</body>
</html>

